import { Card, Form, Input, Button, Select, DatePicker } from 'antd';

// const formItemLayout = {
//   labelCol: {
//     xs: { span: 24 },
//     sm: { span: 8 },
//   },
//   wrapperCol: {
//     xs: { span: 24 },
//     sm: { span: 16 },
//   },
// };

const Index = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    // console.log('Received values of form: ', values);
    // console.log(new Date(values.birthday).getTime());
    console.log({
      ...values,
      birthday: new Date(values.birthday).getTime(),
    });
  };

  return (
    <Card title="注册表单">
      <Form
        // {...formItemLayout}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        form={form}
        name="register"
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          // label是提示内容，加给item的
          // 同时有label和required: true就会自动加上红色的*
          label="姓名"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          {/* 只要在Item里面，所有的表单控件都不需要做受控组件了 */}
          <Select
            style={{ width: 120 }}
            options={[
              {
                value: '1',
                label: '男',
              },
              {
                value: '2',
                label: '女',
              },
            ]}
          />
        </Form.Item>
        <Form.Item name="birthday" label="生日">
          {/* http://momentjs.cn/ */}
          <DatePicker />
        </Form.Item>
        {/* offset: 6表示空出来 */}
        <Form.Item wrapperCol={{ span: 18, offset: 6 }}>
          <Button htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Index;
